<template>
  <div class="xtx-pay-page">
    <div class="container">
      <xtx-bread>
        <xtx-bread-item to="/">首页</xtx-bread-item>
        <xtx-bread-item to="/cart">购物车</xtx-bread-item>
        <xtx-bread-item>支付结果</xtx-bread-item>
      </xtx-bread>
      <div class="pay-result">
        <i class="icon iconfont icon-queren2 success" v-if="payState"></i>
        <i class="icon iconfont icon-shanchu error" v-else></i>
        <div class="result-body">
          <p>订单支付{{`${payState?'成功':'失败'}`}}</p>
          <p v-if="payState">我们将尽快为您发货，收获期间请保持手机畅通</p>
          <p v-if="payState">支付方式：支付宝支付</p>
          <p v-if="payState">支付金额：<span>￥{{order.payMoney}}</span></p>
        </div>
        <div class="result-footer">
          <XtxButton type="primary" class="btn">查看订单</XtxButton>
          <XtxButton type="gary">
            <router-link to="/">进入首页</router-link>
          </XtxButton>
          <div class="tips">
            <i class="icon iconfont icon-tip"></i>
            温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import xtxBread from '@/components/library/xtx-bread.vue'
import XtxBreadItem from '@/components/library/xtx-bread-item.vue'
import XtxButton from '@/components/library/xtx-button.vue'
import { ref } from '@vue/reactivity'
import { findOrderDetail } from '@/api/order'
import { useRoute } from 'vue-router'
import { onMounted } from '@vue/runtime-core'
export default {
  components: { xtxBread, XtxBreadItem, XtxButton },
  name: 'payResult',
  setup () {
    // 支付状态
    const payState = ref(false)
    // 支付订单
    const order = ref(() => {})
    const route = useRoute()
    onMounted(() => {
      payState.value = route.query.payResult
      findOrderDetail(route.query.orderId).then(data => {
        order.value = data.result
        console.log(order.value)
      })
    })

    return {
      payState,
      order
    }
  }
}
</script>
<style lang="less" scoped>
.pay-result{
  padding: 50px 0;
  .success{
    color: @xtxColor;
    font-size: 120px;
  }
  .error{
    color: @priceColor;
    font-size: 120px;
  }
  background-color: #fff;
  height: 570px;
  text-align: center;
  .result-body{
    p{
      margin: 0 10px;
      height: 40px;
      line-height: 20px;
      &:first-child{
        font-size: 20px;
      }
      &:nth-child(4n+2){
        color: #999;
      }
      &:nth-child(3n){
        font-size: 15px;
      }
      &:last-child{
        font-size: 15px;
        span{
          color:@priceColor;
        }
      }
    }
  }
  .result-footer{
    padding-top: 20px;
    .tips{
      margin-top: 50px;
      color: #999;
    }
    .btn{
      margin-right: 15px;
      color: #fff;
    }
  }
}
</style>
